<template>
    <div class="page-lock-record">
        <div class="tabs-box after-line">
            <CommonNav v-model="nav" :navs="navs"></CommonNav>
        </div>

        <!-- 邀请列表 -->
        <div class="list" v-if="list.length">
            <div class="item position-relative" v-for="(item, index) in list" :key="index">
                <div class="inner-box">
                    <div class="avatar">
                        <img class="border-round" :src="item.avatar" mode="aspectFill" />
                    </div>
                    <div class="info">
                        <div class="name text-huge">{{item.nickname}}</div>
                        <div class="rank grey-color text-small">{{item.mobile}}</div>
                    </div>
                </div>
                <wx-button open-type="share" class="btn btn-mobile btn-red btn-normal btn-block btn-round" v-if="!item.has_coupon && nav == 0">送ta券</wx-button>
            </div>
        </div>
        <ListEmpty v-else />
    </div>
</template>

<script lang="ts">
import store from '@/store';
import {
    placeholderImg,
} from '@/lib/utils';
import CommonNav from '@/components/nav/commonNav.vue';
import ListEmpty from '@/components/list/listEmpty.vue';

import { Component, Vue, Watch } from 'vue-property-decorator';

/** 邀请记录 */
@Component({
    name: 'UserInvite',
    components: {
        CommonNav,
        ListEmpty,
    },
})
export default class UserInvite extends Vue {
    public placeholderImg: any = placeholderImg;
    public nav: any = 0;

    public navs: any = [
        {
            text1: '未成交',
            value: 0,
        },
        {
            text1: '已成交',
            value: 1,
        },
    ];

    /** 邀请统计 */
    public get userInvitedList() {
        return store.state.user.userInvitedList;
    }

    /** 用户基础信息 */
    public get userBasicInfo() {
        return store.state.user.basicInfo;
    }

    public get list() {
        return this.userInvitedList[this.nav] ? this.userInvitedList[this.nav].list : [];
    }

    @Watch('nav')
    public onNavChange(val: any) {
        this.getUserInvitedList(true);
    }

    public async getUserInvitedList(forceUpdate: any) {
        store.commit('utils/startRequest');
        await store.dispatch('user/getUserInvitedList', {
            status: this.nav,
            offset: forceUpdate ? 0 : this.userInvitedList[this.nav],
            count: 10,
            forceUpdate,
        });
        store.commit('utils/endRequest');
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.page-lock-record {
    .tabs-box {
        position: relative;
        .common-nav .nav-item .label {
            font-size: 34rpx;
            line-height: 40rpx;
        }
    }
    .list {
        padding: 10px;
        .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background-color: #f8f8f8;
            &:not(:last-child) {
                border-bottom: 2rpx solid #ebebeb;
            }
            .inner-box {
                display: flex;
                align-items: center;
            }
            .avatar {
                width: 100rpx;
                height: 100rpx;
                margin-right: 10px;
            }
            image {
                width: 100%;
                height: 100%;
            }
        }
    }
}

</style>
